<template>
    <div class="Upload">
        <el-input style="margin-left: 0px;" v-model="dataUrl" @change="valueChange"></el-input>
        <el-upload
            :action="uploadApi"
            :show-file-list="false"
            :on-success="handleFileSuccessForOne"
            :on-remove="handleFileRemove"
            :before-upload="beforeFileUpload"
            :headers="{clientname: clientname, Authorization: token}"
            :file-list='fileList'
            :limit="fileSize"
            :multiple="true"
            >
            <!-- disabled -->
            <div style="display: flex;flex-direction: row;">
                <div><el-button>{{buttonTitle}}</el-button></div>
            </div>
        </el-upload>
    </div>
</template>
<script>
import {uploadApi_qlw} from '@/api/common.js'
import {clientname} from '@/settings'
import { number } from 'echarts/lib/export';
import { Loading } from 'element-ui';
import { getToken } from '@/utils/auth'
export default {
    name: 'jcupload',
    components:{},
    props:{
        form:{
            type: Object,
            default: ()=>{}
        },
        buttonTitle: { 
            type: String,
            default: '选择文件'
        },
        scene: {
            type: String,
            default: ''
        },
        filePath:{
            type: String,
            default: 'file'
        },
        fileSize:{
            type:  Number,
            default: 0
        },
        listType:{
            type:  String,
            default: ''
        },
        flag:{
            type: Number,
            default: -1
        },
        fileList:{
            type: Array,
            default: res=>[]
        },
        fileUrl:{
            type:  [String, Number],
            default: ''
        },
        borderRadius:{
            type: Number,
            default: 0
        }
    },
    data(){
        return{
            uploadApi: uploadApi_qlw,
            dataUrl: '',
            fileType: '',
            clientname: clientname,
            fullscreenLoading: null,
            token: ''
        }
    },
    created(){
        this.token = 'token ' + getToken()
    },
    watch: {
        //检测currentCity数值变化
        fileUrl() {
            this.dataUrl = this.fileUrl
        },
    },
    methods:{
        valueChange(e){
            this.$emit('handleFileSuccessForOne', this.form, this.dataUrl)
        },
        handleFileSuccessForOne(res, file, fileList){
            this.fullscreenLoading.close()
            // this.fileType = res.data.image.fileType

            this.dataUrl = res.data.url
            // this.model.coverUrl = res.data.url
            this.$emit('handleFileSuccessForOne', this.form, res.data.url)
        },
        //图片上传
        handleFileSuccess(res, file, fileList) {
            this.fullscreenLoading.close()
            var images = []
            for(var item of fileList){
                if(item.response){
                    images.push(item.response.data.image.id)
                }else{
                    images.push(item.image.id)
                }
            }
            this.$emit('handleFileSuccess',images)
        },
        //文件移除
        handleFileRemove(file, fileList){
            console.log('文件移除', file, fileList)
            var images = []
            for(var item of fileList){
                if(item.res){
                    images.push(item.res.data.data.image.id)
                }else{
                    images.push(item.image.id)
                }
            }
            this.$emit('handleFileSuccess',images)
        },
        beforeFileUpload(file) {
            if(this.scene=='image' && file.type.indexOf('image')==-1){
                this.$message.error('请上传合法的图片!');
                return false
            }else if(this.scene=='video' && file.type.indexOf('video')==-1){
                this.$message.error('请上传合法的视频!');
                return false
            }else{
                if(file.type.indexOf('image')>-1){
                    if (file.size>1024*1024*10) {
                        this.$message.error('上传图片大小不能超过 10MB!');
                        console.log('上传图片大小不能超过 10MB!')
                        return false
                    }else{
                        this.fullscreenLoading = Loading.service({ fullscreen: true, text: '文件在玩命上传中，请稍后！'});
                        return true
                    }
                }else if(file.type.indexOf('video')>-1) {
                    if (file.size>1024*1024*500) {
                        this.$message.error('上传图片大小不能超过 500MB!');
                        console.log('上传图片大小不能超过 500MB!')
                        return false
                    }else{
                        this.fullscreenLoading = Loading.service({ fullscreen: true, text: '文件在玩命上传中，请稍后！' });
                        return true
                    }
                }else{
                    if (file.size>1024*1024*100) {
                        this.$message.error('上传图片大小不能超过 100MB!');
                        console.log('上传图片大小不能超过 100MB!')
                        return false
                    }else{
                        this.fullscreenLoading = Loading.service({ fullscreen: true, text: '文件在玩命上传中，请稍后！' });
                        return true
                    }
                }
            }
        },
    }
}
</script>
<style lang='scss' scoped>
    .Upload{
        display: flex;
        flex-direction: row;
    }
/* 图片上传 */
  .avatar {
    width: 100px;
    height: 100px;
  }
  .plus{
      width: 100px;
        height: 100px;
        line-height: 100px;
        border: #eee solid 1px;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    background-color: #fbfdff;
    border: 1px #cccccc dotted;
  }

</style>
